/*
 * @Author: ૮₍ ˙О˙₎ა
 * @Date: 2023-05-29 14:55:42
 * @description:医院设置页面
 */
import { Button, Card, Form, Input, Table,Modal, message  } from 'antd'
import { SearchOutlined, EditOutlined, DeleteOutlined,WarningOutlined } from '@ant-design/icons'
import React, { useEffect, useState } from 'react'
import { ColumnsType } from 'antd/lib/table'
import { ReqBatchDeleteHospitalSetItem, ReqDeleteHospitalSetItem, ReqGetHospitalList } from '@/api/hospital/hospitalSet';
import { ReqHospitalItem, ReqHospitalList } from '@/api/hospital/model/hospitalSetTypes';
import { useForm } from 'antd/lib/form/Form';
import { useNavigate } from 'react-router-dom';
const { confirm } = Modal;
  export default function HospitalSet() {

  let navigate=useNavigate()
  // 获取form表单数据
  let [form]=useForm();

  // 设置当前页码
  let [current, setCurrent] = useState<number>(1);

  // 设置总条数
  let [total, setTotal] = useState<number>(100)

  // 设置显示的条数
  let [pageSize, setPageSize] = useState<number>(5)

    // 医院数据源
  let [hospital,setHospital]=useState<ReqHospitalList>([]);

  let [loading,setLoading]=useState<boolean>(false)

  let [selectedRowKeys,setSelectedRowKeys]=useState<React.Key[]>([])

  // 请求医院列表
  let getHospitalList= async (page=current,limit=pageSize)=>{
    //显示loading
      setLoading(true)


      let values=form.getFieldsValue()
      // 请求数据
      let result= await ReqGetHospitalList({page,limit,...values}) 
      // 修改医院源数据和总数状态
      setHospital(result.records)
      setTotal(result.total)

      
    //隐藏loading
      setLoading(false)

  }
  /* 点击搜索按钮时调用*/
  let finish=()=>{
    getHospitalList()
  }
              // 清空按钮
  let reset=()=>{
    form.resetFields();
    setCurrent(1)
    setPageSize(5)
    getHospitalList()
  }

  // 模拟生命周期钩子
  useEffect(()=>{
      getHospitalList();
  },[current,pageSize])
  // 表头
  const columns: ColumnsType<any> = [
    {
      title: '序号',
      // dataIndex: 'id',
      width: 50,
      align: "center",
      render: (value: any, record: any, index: number) => {
        return index + 1
      }

    },
    {
      title: '医院名称',
      dataIndex: 'hosname',
      align: "center",
      width: 170,

    },
    {
      title: '医院编号',
      dataIndex: 'hoscode',
      width: 100,
      align: "center",
    },
    {
      title: 'api基础路径',
      dataIndex: 'apiUrl',
      width: 150,
      align: "center",
    },
    {
      title: '签名',
      dataIndex: 'signKey',
      align: "center",
      width: 240,
    },
    {
      title: '联系人姓名',
      dataIndex: 'contactsName',
      width: 130,
      align: "center",
    },
    {
      title: '联系人手机',
      dataIndex: 'contactsPhone',
      align: "center",
      width: 130,
    },
    {
      title: '操作',
      fixed: 'right',
      align: "center",
      width: 100,
      // dataIndex: 'xx',
      render: (row:ReqHospitalItem) => {
        return <>
          <Button icon={<EditOutlined />} type="primary" onClick={()=>{
            navigate(`/syt/hospital/hospitalList/edit/${row.id}`)
          }}></Button>
          <Button onClick={del(row.id.toString(),row.hosname)} icon={<DeleteOutlined />} className='ml' type="primary" danger></Button>
        </>
      }
    }

  ]
    // 删除按钮
      let del=(id:string,hosname:string)=>{
          return  ()=>{
            // 使用了antd的confirm模态框
            confirm({
              title:`确定要删除吗${hosname}?`,
              icon:<WarningOutlined />,
              async onOk() {
                // 发送删除请求并重新请求数据渲染页面
                await ReqDeleteHospitalSetItem(id)
                getHospitalList(1,5)
                message.success("删除成功")
              },
            })
          }
      }

      // 批量删除按钮
      let batchDel=()=>{
        confirm({
          title:'确定要批量删除吗？',
          onOk:async ()=>{
            await ReqBatchDeleteHospitalSetItem(selectedRowKeys);
            setSelectedRowKeys([])
            message.success("批量删除成功")
            getHospitalList(1,5)
          }
        })
      }

  return (
    <Card>
      {/* 列表搜索 */}
      <Form
        name="basic"
        layout="inline"
        form={form}
        onFinish={finish}
      >
        <Form.Item
          name="hosname"
        >
          <Input placeholder='医院名称' />
        </Form.Item>

        <Form.Item
          name="hoscode"
        >
          <Input placeholder='医院编号' />
        </Form.Item>
        <Form.Item>
          <Button icon={<SearchOutlined />} type="primary" htmlType="submit">
            查询
          </Button>
          <Button className='ml' type="default" onClick={reset}>
            清空
          </Button>
        </Form.Item>
      </Form>

      {/* 编辑列表按钮 */}
      <Button className='mt' type="primary" onClick={()=>{
        navigate("/syt/hospital/hospitalList/add")
      }} >
        添加
      </Button>
      <Button className='ml' type="primary" danger disabled={selectedRowKeys.length===0} onClick={batchDel}>
        批量删除
      </Button>

      {/* 医院表格 */}
      <Table className='mt'
        bordered
        loading={loading}
        rowKey={'id'}
        scroll={{ x: 1500 }}
        dataSource={hospital}
        columns={columns}

        // 表格行选择
        rowSelection={{
          onChange:(selectedRowKeys: React.Key[])=>{
              setSelectedRowKeys(selectedRowKeys)
          }
        }}
        // 分页功能
        pagination={
          {
            current,
            total,
            pageSize,
            pageSizeOptions: [5, 10, 20],
            showSizeChanger: true,
            showQuickJumper: true,
            showTotal: (total: number) => {
              return <span>总共：{total} 条</span>
            },
            // 分页发生改变时调用
            onChange:(page: number, pageSize: number)=>{
                setCurrent(page)
                setPageSize(pageSize)
            },
            
          }
        } />

    </Card>
  )
}
